<template>
    <div class="container" :style="lang == 'en' ? (user_infoStore.userToken ? 'width:500px' : 'width:350px') : (user_infoStore.userToken ? 'width:420px' : 'width:350px')">
        <div class="box" v-if="!user_infoStore.userToken">
            <h2>{{ $t('Register_Login_Now') }}</h2>
            <div class="login-ygcontent" style="display:block">
                <div class="flex">
                    <label>
                        <svg t="1740989750854" class="icon" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4766" width="20" height="20"><path d="M1024 1024H93.090909a93.090909 93.090909 0 0 1-93.090909-93.090909V93.090909a93.090909 93.090909 0 0 1 93.090909-93.090909h930.909091a93.090909 93.090909 0 0 1 93.090909 93.090909v837.818182a93.090909 93.090909 0 0 1-93.090909 93.090909zM93.090909 930.909091h930.909091V352.395636l-425.099636 245.434182a358.027636 358.027636 0 0 1-74.891637 18.059637L93.090909 367.104V930.909091zM93.090909 93.090909v166.493091l454.050909 262.190545a40.215273 40.215273 0 0 1 5.213091-4.654545L1024 244.875636V93.090909H93.090909z" fill="#ffffff" p-id="4767"></path></svg>
                    </label>
                    <input :style="lang == 'en' ? 'width:407px' : ''" v-model="user_info.username" @keydown.enter="isContacUser_fn(0)" class="flex-list" id="username" type="text" :placeholder="$t('username_msg')">
                </div>
                <div class="flex">
                    <label>
                        <svg t="1727428768544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4287" width="20" height="20"><path d="M672 477.696C748.512 433.408 800 350.656 800 256 800 114.688 685.28 0 544 0 402.72 0 288 114.688 288 256 288 350.656 339.488 433.408 416 477.696L416 576 448 624 416 672 416 736 448 784 416 832 416 944C416 944 467.904 982.912 505.6 1011.2 528.352 1028.256 559.648 1028.256 582.4 1011.2 620.096 982.912 672 944 672 944L672 477.696ZM544 96C579.328 96 608 124.672 608 160 608 195.296 579.328 224 544 224 508.672 224 480 195.296 480 160 480 124.672 508.672 96 544 96" p-id="4288" fill="#ffffff"></path></svg>
                    </label>
                    <input :style="lang == 'en' ? 'width:407px' : ''" v-model="user_info.password" @keydown.enter="isContacUser_fn(0)" class="flex-list" id="password" :type="password_type"  :placeholder="lang == 'en' ? $t('password_msg') : '請輸入密碼（至少8個字元）'">
                    <div class="eye-btn">
                        <svg v-if="password_type == 'password'" @click="change_password_type" width="20" height="20" viewBox="0 0 20 20" fill="#9499A0" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5753 6.85456C17.7122 6.71896 17.8939 6.63806 18.0866 6.63806C18.7321 6.63806 19.0436 7.42626 18.5748 7.87006C18.1144 8.30554 17.457 8.69885 16.6478 9.03168L18.1457 10.5296C18.2101 10.5941 18.2613 10.6706 18.2962 10.7548C18.331 10.839 18.349 10.9293 18.349 11.0204C18.349 11.1116 18.331 11.2019 18.2962 11.2861C18.2613 11.3703 18.2101 11.4468 18.1457 11.5113C18.0812 11.5757 18.0047 11.6269 17.9205 11.6618C17.8363 11.6967 17.746 11.7146 17.6548 11.7146C17.5637 11.7146 17.4734 11.6967 17.3892 11.6618C17.305 11.6269 17.2284 11.5757 17.164 11.5113L15.3409 9.68819C15.2898 9.63708 15.247 9.57838 15.2141 9.51428C14.4874 9.71293 13.6876 9.87122 12.8344 9.98119C12.8363 9.99011 12.8381 9.99908 12.8397 10.0081L13.2874 12.5472C13.315 12.7266 13.2713 12.9098 13.1656 13.0573C13.0598 13.2049 12.9005 13.3052 12.7217 13.3367C12.5429 13.3683 12.3589 13.3285 12.2091 13.2259C12.0592 13.1234 11.9555 12.9663 11.9202 12.7882L11.4725 10.2491C11.4645 10.2039 11.4611 10.1581 11.4621 10.1125C10.9858 10.1428 10.4976 10.1586 10.0002 10.1586C9.57059 10.1586 9.14778 10.1468 8.73362 10.1241C8.73477 10.1656 8.7322 10.2074 8.72578 10.249L8.27808 12.7881C8.24612 12.9694 8.14345 13.1306 7.99265 13.2362C7.84186 13.3418 7.65528 13.3831 7.47398 13.3512C7.29268 13.3192 7.1315 13.2166 7.0259 13.0658C6.9203 12.915 6.87892 12.7284 6.91088 12.5471L7.35858 10.008C7.35877 10.007 7.35896 10.0061 7.35915 10.0052C6.50085 9.90284 5.6941 9.75191 4.95838 9.56025C4.93012 9.60634 4.89634 9.64933 4.85748 9.68819L3.03438 11.5113C2.96992 11.5757 2.8934 11.6269 2.80918 11.6618C2.72496 11.6967 2.63469 11.7146 2.54353 11.7146C2.45237 11.7146 2.36211 11.6967 2.27789 11.6618C2.19367 11.6269 2.11714 11.5757 2.05268 11.5113C1.98822 11.4468 1.93709 11.3703 1.90221 11.2861C1.86732 11.2019 1.84937 11.1116 1.84937 11.0204C1.84937 10.9293 1.86732 10.839 1.90221 10.7548C1.93709 10.6706 1.98822 10.5941 2.05268 10.5296L3.49373 9.08855C2.6197 8.744 1.91247 8.33062 1.42559 7.87006C0.956591 7.42636 1.26799 6.63816 1.91359 6.63816C2.10629 6.63816 2.28789 6.71896 2.42489 6.85456C2.70009 7.12696 3.19529 7.45886 3.98459 7.77796C5.54429 8.40856 7.73699 8.77016 10.0001 8.77016C12.2632 8.77016 14.4558 8.40856 16.0156 7.77796C16.8049 7.45886 17.3001 7.12696 17.5753 6.85456Z" fill="#9499A0"></path></svg>
                        <svg v-else="password_type == 'text'" @click="change_password_type" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.11069 9.43732C3.21647 7.77542 5.87904 4.58331 9.89458 4.58331C13.8801 4.58331 16.6483 7.72502 17.8345 9.4049C18.0905 9.76747 18.0905 10.2325 17.8345 10.5951C16.6483 12.2749 13.8801 15.4166 9.89458 15.4166C5.87904 15.4166 3.21647 12.2245 2.11069 10.5626C1.88009 10.2161 1.88009 9.7839 2.11069 9.43732ZM9.89458 3.33331C5.19832 3.33331 2.20919 7.03277 1.07001 8.74489C0.560324 9.51091 0.560323 10.4891 1.07001 11.2551C2.20919 12.9672 5.19832 16.6666 9.89458 16.6666C14.5412 16.6666 17.6368 13.0422 18.8556 11.3161C19.4168 10.5213 19.4168 9.4787 18.8556 8.68391C17.6368 6.95774 14.5412 3.33331 9.89458 3.33331ZM7.29165 9.99998C7.29165 8.50421 8.50421 7.29165 9.99998 7.29165C11.4958 7.29165 12.7083 8.50421 12.7083 9.99998C12.7083 11.4958 11.4958 12.7083 9.99998 12.7083C8.50421 12.7083 7.29165 11.4958 7.29165 9.99998ZM9.99998 6.04165C7.81385 6.04165 6.04165 7.81385 6.04165 9.99998C6.04165 12.1861 7.81385 13.9583 9.99998 13.9583C12.1861 13.9583 13.9583 12.1861 13.9583 9.99998C13.9583 7.81385 12.1861 6.04165 9.99998 6.04165Z" fill="#9499A0"></path></svg>
                    </div> 
                </div>
            </div>
            <div class="btn_box">
                <button id="mBtn" data-type="smsLogin" @click="isContacUser_fn(0)">{{ $t('Register_Login_Now') }}</button>
                <button id="mBtn" data-type="smsLogin" style="margin-left:2px" @click="isContacUser_fn(1)">{{ $t('Tourist_login') }}</button>
            </div>
            <!-- Turnstile 小部件容器 -->
            <div v-show="!user_infoStore.userToken && !turnstileToken" id="turnstile-widget-container" class="cf-turnstile" data-sitekey="0x4AAAAAAA5XWjuuv0turKm2" :data-language="lang"></div>
            <div class="login_logo" style="height:35px;">
                <li>
                    <img src="https://yyfuns.com/static/fb.png" @click="to_fb">
                </li>
                <li v-if="!isFaceBook">
                    <img src="https://yyfuns.com/static/yahoo.png" @click="to_yh">
                </li>
                <li v-if="!isFaceBook">
                    <img src="https://yyfuns.com/static/google.png" @click="to_gg">
                </li>
            </div>
        </div>

        <div class="box" v-if="user_infoStore.userToken">
            <div class="user_info">
                <div class="user_box">
                    <img v-if="userInfo.user_avatar && user_infoStore.userToken" width="80" :src="userInfo.user_avatar" alt="">
                    <svg v-if="!userInfo.user_avatar && user_infoStore.userToken" t="1719544828412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4801" width="70" height="70"><path d="M1023.464334 512.079668A511.504397 511.504397 0 1 1 325.652931 35.993758a500.49811 500.49811 0 0 1 372.741992 0A511.472402 511.472402 0 0 1 1023.464334 512.079668M315.414524 404.576398a225.436916 225.436916 0 0 0 108.143171 197.089328 176.7085 176.7085 0 0 0 174.052913 1.599751 224.477066 224.477066 0 0 0 111.022722-198.689079 197.985189 197.985189 0 1 0-393.218806 0m198.369129 585.50888a475.062068 475.062068 0 0 0 370.182391-175.972614c-10.238407-85.106755-93.10551-157.095552-209.567386-193.249926a238.13894 238.13894 0 0 1-327.309063-2.879552c-113.902274 32.314971-197.409278 98.544664-216.926241 177.892316a476.021919 476.021919 0 0 0 383.620299 194.529726" fill="#fff" p-id="4802"></path></svg>
                    <div style="font-size: 16px;" v-if="avatar_masker" class="avatar_masker">{{masker_title}}</div> 
                </div>
                <div class="user_info_name">
                    <p class="nickname">{{userInfo.nickname}}</p> 
                    <span class="logout" @click="signOut">[{{ $t('login_out') }}]</span>
                    <p>{{$t('User')}}ID：<span class="text_value">{{userInfo.id}}</span></p>
                    <p>{{ $t('Y_coin') }} ：<span><span class="text_value">{{ userInfo.money }}</span></span></p>
                    <p>{{ $t('integral') }} ：<span><span class="text_value">{{ userInfo.integral }}</span></span></p>

                    <div class="btn">
                        <span v-if="!isSign" class="sign" @click="signIn(date)">{{ $t('sign_in') }}</span>
                        <span v-if="isSign" class="sign isSign">{{ $t('Signed_in') }}</span>
                        <!-- <br v-if="lang == 'en' && userInfo.fb_token"/> -->
                        <span v-if="!userInfo.fb_token"><a @click="to_fb_bind">{{ $t('bind_FB') }}</a></span>
                        <span  v-if="userInfo.fb_token" class="isSign">fb {{$t('Already_bound')}}</span> 
                        <br v-if="userInfo.yh_email || (lang == 'en' ? userInfo.fb_token : '') || (lang == 'en' ? isSign : '')"/>
                        <span v-if="!userInfo.yh_email"><a @click="to_yh_bind">{{ $t('bind_YH') }}</a></span>
                        <span :style="lang ? 'position: relative;top: 6px;' : 'margin-top:10px;'" v-if="userInfo.yh_email" class="isSign">Yahoo {{$t('Already_bound')}}</span> 
                        <br v-if="(!userInfo.yh_email && !userInfo.fb_token && !isSign && lang == 'en') || (lang == 'zh' && !userInfo.yh_email)"/>
                        <span :style="lang == 'zh' ? 'position: relative;top: 6px;' : 'margin-top:10px;'" v-if="!userInfo.gg_email"><a @click="to_gg_bind">{{ $t('bind_GG') }}</a></span>
                        <span :style="lang == 'zh' ? 'position: relative;top: 6px;' : 'margin-top:10px;'" v-if="userInfo.gg_email" class="isSign">Google {{$t('Already_bound')}}</span> 
                    </div>
                </div>
            </div>

            <div class="playing" v-if="userPlayList.length !== 0">
                <p>{{ $t('recently_play') }}</p>
                <div class="flex" v-for="item in userPlayList" :key="item.id" >
                    <div class="game_img" @click="$router.push('/home/gameCenter/'+item.id)">
                        <img width="38" :src="$baseUrl+item.icon" alt="">
                    </div>
                    <div class="game_name" @click="$router.push('/home/gameCenter/'+item.id)">{{ item.title }}</div>
                    <div class="btn" @click="open_game(item.id,item.pixel_code)">
                        <button>{{ $t('play_game') }}</button>
                    </div>
                </div>
            </div>
            
        </div>
        <BindAccount :visible="visible_bind" :handleClose='handleClose' :getUserInfo="getUserInfo" :fb_bind_show="fb_bind_show" :yh_bind_show="yh_bind_show" :gg_bind_show="gg_bind_show"/>
        <div v-if="lang == 'zh'">
            <Dialog :title="'Facebook绑定'" :title2="'Facebook是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
            <Dialog :title="'Yahoo绑定'" :title2="'Yahoo是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
            <Dialog :title="'Google绑定'" :title2="'Google是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
        </div>

        <div v-if="lang == 'en'">
            <Dialog :title="'Facebook binding'" :title2="'Is Facebook successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
            <Dialog :title="'Yahoo binding'" :title2="'Is Yahoo successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
            <Dialog :title="'Google binding'" :title2="'Is Google successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
        </div>

        <VerificationCode :visible="isVerifyEmail" ref="verificationCode"/>
        
    </div>
</template>

<script setup>
import { ref,reactive,onMounted } from 'vue'
import axios from '@/utils/api'
import { useRouter,useRoute } from "vue-router"
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { useLoadingStore } from '@/store/modules/loading/index';
import { useI18n } from 'vue-i18n';
import {useGetGameUrl} from '@/hooks/getGameUrl'
import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
import Dialog from "@/components/Dialog/index.vue"
// import FingerprintJS from '@fingerprintjs/fingerprintjs'
import Fingerprint2 from 'fingerprintjs2'
import VerificationCode from "@/components/VerificationCode/index.vue"


const route = useRoute()

const { locale } = useI18n();
const loadingStore = useLoadingStore();
const user_infoStore = useUserInfoStore();
const userInfo = reactive(user_infoStore.userInfo)
const router = useRouter()

let lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}

let isFaceBook = false

const isFacebookBrowser = () => {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    return /FBAN|FBAV/.test(userAgent); // 匹配Facebook浏览器的标识符
}

if (isFacebookBrowser()) {
    // console.log("当前是Facebook浏览器");
    isFaceBook = true
} else {
    // console.log("当前不是Facebook浏览器");
    isFaceBook = false
}

const isVerifyEmail = ref(false)

const visible_bind = ref(false)
let dialog_fb_bind = ref(false)
const handleClose = () => {
    visible_bind.value = false
};
const fb_bind_show = ()=>{
    dialog_fb_bind.value = true
}
const fb_bind_com = ()=>{
    getUserInfo()
    dialog_fb_bind.value = false
}

let dialog_yh_bind = ref(false)
const yh_bind_show = ()=>{
    dialog_yh_bind.value = true
}
const yh_bind_com = ()=>{
    getUserInfo()
    dialog_yh_bind.value = false
}

let dialog_gg_bind = ref(false)
const gg_bind_show = ()=>{
    dialog_gg_bind.value = true
}
const gg_bind_com = ()=>{
    getUserInfo()
    dialog_gg_bind.value = false
}

const user_info = reactive({
    username:'',
    password:'',
    form_type:'login',
})



const fingercode = ref('')
Fingerprint2.get(async (components) => {
    const values = components.map((component) => component.value) 
    fingercode.value = Fingerprint2.x64hash128(values.join(''), 31) 
})

onMounted(()=>{
    try {
        const script = document.createElement('script');
        script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onloadTurnstileCallback";
        script.defer = true;
        document.head.appendChild(script);
    } catch (error) {
        
    }
})



const turnstileToken = ref('')
window.onloadTurnstileCallback = function () {
    turnstile.render("#turnstile-widget-container", {
      sitekey: "0x4AAAAAAA5XWjuuv0turKm2",  // 站点密钥
      callback: function (token) {
        console.log("挑战成功，获得的 token:", token);
        setTimeout(() => {
            turnstileToken.value = token 
        }, 1200);
      },
      errorCallback: function (error) {
        console.log("Turnstile 错误:", error);
      },
    });
};

const isContacUser_fn =async (type)=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    if(type == 1){ //游客登录
        tourist_login()
        return
    }else if(type == 2){
        isRegister.value = true
        return
    }
    let regex_username = /^[A-Za-z0-9@.,_]{4,20}$/;

    const res = await axios.get('/verifyUser?username='+user_info.username)
    if(res.data.res == 'F'){
        login()
        return
    }else{
        regex_username  = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    }
    const regex_password = /^[A-Za-z0-9@.,_]{8,20}$/;
    
    if(!regex_username.test(user_info.username)){
        if(lang.value == 'en'){
            ElMessage.error('The format of the account email is incorrect, please re-enter')
        }else{
            ElMessage.error('賬號電子信箱格式不準確，請重新輸入')
        }
        
        return
    }

    if(!regex_password.test(user_info.password)){
        if(lang.value == 'en'){
            ElMessage.error('The password format is not accurate, at least 8 is the password')
        }else{
            ElMessage.error('密碼格式不準確，最少8位密碼')
        }
        
        return
    }
    
    login()
}


const tourist_login = async () =>{
    Fingerprint2.get(async (components) => {
        const values = components.map((component) => component.value) 
        const fingercode = Fingerprint2.x64hash128(values.join(''), 31) 
        console.log('浏览器指纹：',fingercode) 

        const res = await axios.get('/tourist_register_login?code='+fingercode)
        // console.log(res);
        if(res.code === 1){
            if(lang.value == 'en'){
                ElMessage.success('Tourist login')
            }else{
                ElMessage.success('遊客登入')
            }
        
            user_infoStore.setUserToken(res.data.token)
            user_infoStore.setUserToken_expire(res.data.expire)
            user_infoStore.setUserinfo(res.data.user_info)
            window.location.reload()
        }else{
            ElMessage.error(res.message)
        }
    })
   
    
    
}
const verificationCode = ref()
const login = async () =>{
    const res = await axios.post('/register_login',user_info)
    // console.log(res);
    if(res.code === 1){
        if(lang.value == 'en'){
            ElMessage.success('Registration successful, logged in')
        }else{
            ElMessage.success('註冊成功，請完成電子信箱驗證')
        }

        // const his = localStorage.getItem('registerRecord') ? JSON.parse(localStorage.getItem('registerRecord')) : null;
        // let registerNum = his ? his.registerNum : 0
        // const registerRecord = {
        //     registerTime:Math.floor(Date.now() / 1000),
        //     fingercode:fingercode.value,
        //     registerNum:registerNum+=1
        // }
        // localStorage.setItem('registerRecord',JSON.stringify(registerRecord))
        user_infoStore.setUserToken(res.data.token)
        user_infoStore.setUserToken_expire(res.data.expire)
        user_infoStore.setUserinfo(res.data.user_info)

        console.log(userInfo.status)
        if(userInfo.status == 3){ //未激活触发邮箱绑定
            isVerifyEmail.value = true
            verificationCode.value.send_code('send')
            return
        }

        
        window.location.reload()
    }else if(res.code === 0){
        if(lang.value == 'en'){
            ElMessage.success('Login succeeded')
        }else{
            ElMessage.success('登錄成功')
        }
       
        user_infoStore.setUserToken(res.data.token)
        user_infoStore.setUserToken_expire(res.data.expire)
        user_infoStore.setUserinfo(res.data.user_info)
        
        console.log(user_infoStore.userInfo);
        window.location.reload()
    }else if(res.code === 9003){
        if(lang.value == 'en'){
            ElMessage.error('The account does not exist, please register first')
        }else{
            ElMessage.error('賬號不存在，請先註冊')
        }
    }else{
        ElMessage.error(res.message)
    }
    
}

const fb_url = ref('')
const get_fb_auth_url = async ()=>{
	const res = await axios.get('/get_fb_auth_url?type=login')
	// console.log(res);
	if(res.code === 200){
		fb_url.value = res.data.fb_auth_url
	}
}
get_fb_auth_url()

const to_fb = ()=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    loadingStore.startLoading();
    window.location.href = fb_url.value
}

const yh_url = ref('')
const get_yh_auth_url = async ()=>{
	const res = await axios.get('/get_yh_auth_url?type=login')
	// console.log(res);
	if(res.code === 200){
		yh_url.value = res.data.yh_auth_url
	}
}
get_yh_auth_url()
const to_yh = ()=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    loadingStore.startLoading();
    window.location.href = yh_url.value
}


const fb_url_bind = ref('')
const get_fb_auth_url_bind = async ()=>{
    const res = await axios.get(`/get_fb_auth_url?&type=binding`)
    // console.log(res);
    if(res.code === 200){
        fb_url_bind.value = res.data.fb_auth_url
    }
}
get_fb_auth_url_bind()

const to_fb_bind = ()=>{
    window.open(fb_url_bind.value)
}

const yh_url_bind = ref('')
const get_yh_auth_url_bind = async ()=>{
    const res = await axios.get(`/get_yh_auth_url?&type=binding&user_id=${userInfo.id}`)
    // console.log(res);
    if(res.code === 200){
        yh_url_bind.value = res.data.yh_auth_url
    }
}
get_yh_auth_url_bind()
const to_yh_bind = ()=>{
    window.open(yh_url_bind.value)
}


const gg_url = ref('')
const get_gg_auth_url = async ()=>{
	const res = await axios.get('/get_gg_auth_url?type=login')
	// console.log(res);
	if(res.code === 200){
		gg_url.value = res.data.gg_auth_url
	}
}
get_gg_auth_url()
const to_gg = ()=>{
    if(!turnstileToken.value && window.baseUrl != "http://192.168.110.244:8081/game/public"){
        if(lang.value == 'en'){
            ElMessage.error('Human machine verification failed')
        }else{
            ElMessage.error('人機驗證未通過')
        }
        return
    }
    loadingStore.startLoading();
    window.location.href = gg_url.value
}

const gg_url_bind = ref('')
const get_gg_auth_url_bind = async ()=>{
    const res = await axios.get(`/get_gg_auth_url?&type=binding&user_id=${userInfo.id}`)
    // console.log(res);
    if(res.code === 200){
        gg_url_bind.value = res.data.gg_auth_url
    }
}
get_gg_auth_url_bind()
const to_gg_bind = ()=>{
    window.open(gg_url_bind.value)
}


const avatar_masker = ref(0)
const masker_title = ref('')
if(userInfo){
    switch(userInfo.avatar_check){
        case 1:
            if(locale.value == 'zh'){
                masker_title.value = '審核中'
            }else{
                masker_title.value = 'Under review'
            }
            
            avatar_masker.value = 1
            break
        case 2:
            avatar_masker.value = 0
            break	
        case 3:
            if(locale.value == 'zh'){
                masker_title.value = '被駁回'
            }else{
                masker_title.value = 'Rejected'
            }
            
            avatar_masker.value = 1
            break	
    }
}

const getNowDate = ()=>{
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
    const day = String(today.getDate()).padStart(2, '0'); // 确保日是两位数
    return `${year}-${month}-${day}`;
}
const signIn = async ()=>{

    const signIn_date = getNowDate()

    const data = await axios.get('/userSignIn?user_id='+userInfo.id+'&signIn_time='+signIn_date)
    console.log(data);
    if(data.code == 200){
        if(lang.value == 'en'){
            ElMessage.success(`Sign in successful`)
        }else{
            ElMessage.success(`簽到成功`)
        }
        getUserInfo()
        getSignInList()
    }else if(data.code == 7021){
        if(lang.value == 'en'){
            ElMessage.warning('The check-in function requires a formal member to use, please authenticate as a formal member')
        }else{
            ElMessage.warning(data.message)
        }
        
        visible_bind.value = true
    }else{
        ElMessage.error(data.message)
    }
    
    
}

const getUserInfo = async () =>{
    const data = {
        user_id:userInfo.id,
    }
    const list = await axios.post('/getUserInfo',data)
    userInfo.value = list.data
    user_infoStore.setUserinfo(list.data.user_info)
}

const isSign = ref(0)
const sign_score = ref(0)
const SignInList = reactive([])
const getSignInList = async () =>{
    const list = await axios.get('/UserSignInList?user_id='+userInfo.id)
    Object.assign(SignInList,list.data)
    console.log(SignInList,555555);

    const signIn_date = getNowDate()
    SignInList.find(item=>{
        
        if(item.signIn_date == signIn_date){
            console.log(item,9999);
            isSign.value = item.is_signIn
            console.log(item.day_awards.type,3333);
            
            if(item.day_awards.type == 1){
                sign_score.value = item.day_awards.awards
            }else{
                sign_score.value = item.day_awards.awards_name
            }
        }
    })
}
if(userInfo.id){
    getSignInList()
}


const signOut = () => {
    user_infoStore.clearUserinfo()
    user_infoStore.clearUserToken()
    user_infoStore.clearUserToken_expire()
    if(locale.value == 'zh'){
        ElMessage.success('登出成功')
    }else{
        ElMessage.success('Exit successful')
    }
    
    // console.log(user_infoStore.userToken);
    // router.replace('/home')
    window.location.reload()
    avatar_masker.value = 0
}


const userPlayList = reactive([])
const getUserPlayList = async () =>{
    let list = []
    // if(route.path === '/userCenter/Gamed'){
    //     list = await axios.get('/getUserPlayList?user_id='+userInfo.id)
    // }else{
    //     list = await axios.get('/getUserPlayList?user_id='+userInfo.id+'&limit=4')
    // }
    list = await axios.get('/getUserPlayList?user_id='+userInfo.id+'&limit=4')
    Object.assign(userPlayList,list.data.slice(0,4))
    console.log(userPlayList);
}
if(userInfo.id){
    getUserPlayList()
}


const open_game = async (game_id,pixel_code) => {
    const data = await useGetGameUrl(game_id,userInfo.id)
    console.log(data,'data');
    if(data.code == 5002 || data.code == 5003 || data.message == 'Token失效'){
        // router.push('/login')
        return
    }

    // localStorage.setItem('game_url',data.game_url)
    const url = router.resolve({ path: '/playgame',query: { id: game_id,game_name: data.game_name,pixel_code } }).href;
    window.open(url)
    
}

let password_type = ref('password')
const change_password_type = ()=>{
    if(password_type.value == 'password'){
        password_type.value = 'text'
    }else{
        password_type.value = 'password'
    }
}
</script>

<style lang="less" scoped>
.container{
    width: 420px;
    padding-bottom: 20px;
    background-color: rgba(0, 0, 0, .6);
    .box{
        width: 90%;
        h2{
            font-size: 23px;
            color: white;
            font-weight: normal;
            margin-top: 20px;
        }
        .login-ygcontent{
            margin-top: 10px;
            .flex{
                margin-bottom: 10px;
                display: flex;
                border-radius: 5px;
                overflow: hidden;
                position: relative;
                input{
                    width: 317px;
                    height: 36px;
                    align-items: center;
                    -webkit-box-pack: center;
                    -moz-justify-content: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-border-radius: 0;
                    border-radius: 0;
                    border: 1px solid #d8d7d7;
                    border-left: none;
                    margin: 0;
                    padding-left: 10px;
                    font-size: 12px;
                }
                input:focus{
                    border-color: #409eff; /* 选中时的边框颜色 */
                    outline: none; /* 去除默认的轮廓 */
                    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 123, 255, 0.5);
                }
                label{
                    width: 40px;
                    height: 38px;
                    background-color: #409eff;
                    display: inline-block;
                    margin: 0;
                    display: flex;
                    align-items: center;
                }
                .eye-btn{
                    position: absolute;
                    right: 15px;
                    top: 10px;
                    cursor: pointer;
                    svg:hover {
                        path{
                            fill: #00a1d6;
                        }
                    }
                }
            }
        }
        .btn_box{
            display: flex;
            margin-top: 15px;
            justify-content: space-between;
            button{
                width: 48%;
                color: #fff;
                background: #44a6f5;
                font-size: 16px;
                text-align: center;
                display: block;
                border: none;
                border-radius: 5px;
                padding: 8px 0;
                cursor: pointer;
                margin: 0;
            }
            button:hover{
                background-color: rgba(#44a6f5,.8);
            }
        }
        .login_logo {
            display: flex;
            justify-content: center;
            position: relative;
            margin-top: 15px;
            li{
                height: 40px;
                margin: 0 5px;
                cursor: pointer;
                img {
                    width: 35px;
                    border-radius: 20px;
                }
            }
            li:hover{
                opacity: .7;
            }
        }
        .login_logo::before, .login_logo::after {
            position: absolute;
            content: '';
            width: 56px;
            height: 0.01rem;
            background: #b1b1b1;
            top: 17px;
        }
        .login_logo::before{
            left: 0;
        }
        .login_logo::after{
            right: 0;
        }
        .user_info{
            display: flex;
            margin-top: 20px;
            .user_info_name{
                margin-left: 10px;
                .logout{
                    display: inline-block;
                    margin-left: auto;
                    font-size: 14px;
                    color: #ff8400;
                    cursor: pointer;
                    position: absolute;
                    right: 10px;
                    top: 20px;
                }
                p{
                    font-size: 15px;
                    color: white;
                }
                .nickname{
                    font-weight: bold;
                    margin-bottom: 5px;
                    color: white;
                    font-size: 17px;
                }
                .text_value{
                    color: #ff8400;
                }
                .btn{
                    // width: 200px;
                    margin-top: 5px;
                    line-height: 26px;
                    span{
                        background: #44a6f5;
                        color: white;
                        padding: 3px 15px;
                        border-radius: 5px;
                        margin-right: 10px;
                        font-size: 13px;
                        cursor: pointer;
                        a{
                            color: white;
                            text-decoration: none;
                        }
                    }
                    span:hover{
                        background-color: rgba(#44a6f5,.8);
                    }
                }
            }
            .user_box{
                margin: 0;
                position: relative;
                img{
                    border-radius: 50%;
                    border: 2px solid #fff;
                }
            }
        }
        
        
    }
    
}
.avatar_masker{
    width:84px;
    height: 84px;
    background-color: rgba(#000,.6);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    font-size: 10px;
    cursor: pointer;
    text-align: center;
}
.isSign{
    filter: grayscale(1);
    pointer-events: none;
}

.playing{
    p{
        color: white;
        font-weight: bold;
        font-size: 15px;
        margin-top: 10px
    }
    .flex{
        display: flex;
        align-items: center;   
        margin-top: 10px;
        position: relative;
        color: white;
        div{
            margin: 0;
        } 
        .game_name{
            margin-left: 5px;
            font-size: 12px;
            cursor: pointer;
        }
        .game_name:hover{
            color: #44a6f5;
        }
        .game_img{
            display: flex;
            cursor: pointer;
            img{
                border-radius: 8px;
            }
        }
        .btn{
            position: absolute;
            right: 0;
            button{
                cursor: pointer;
                font-size: 12px;
                color: white;
                background: #44a6f5;
                border: none;
                padding: 5px 15px;
                border-radius: 7px;
            }
            button:hover{
                background-color: rgba(#44a6f5,.8);
            }
        }
    }
}
.cf-turnstile{
    text-align: center;
    margin-top: 17px;
}

</style>